<template>
  <div class="dashboard-editor-container">

<!--    <panel-group @handleSetLineChartData="handleSetLineChartData" />-->
    <panel-group />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineInvite" />
    </el-row>

    <el-row style="background:#fff;padding: 16px; margin-bottom:20px;">
      <el-select v-model="provinceId" placeholder="请选择省份" style="width: 150px" @change="provinceChangeEvent" clearable>
        <el-option
          v-for="item in provinceArr"
          :key="item.cityId"
          :label="item.name"
          :value="item.cityId"
        ></el-option>
      </el-select>
      <el-select v-model="cityId" placeholder="请选择城市" style="width: 150px; padding-left: 20px" @change="cityChangeEvent" clearable>
        <el-option
          v-for="item in cityArr"
          :key="item.cityId"
          :label="item.name"
          :value="item.cityId"
        ></el-option>
      </el-select>
      <el-select v-model="districtId" placeholder="请选择区" style="width: 150px; padding-left: 20px" @change="districtChangeEvent" clearable>
        <el-option
          v-for="item in districtArr"
          :key="item.cityId"
          :label="item.name"
          :value="item.cityId"
        ></el-option>
      </el-select>
      <el-select v-model="time" placeholder="请选择时间" style="width: 150px; padding-left: 20px" @change="timeChangeEvent" clearable>
        <el-option
          v-for="item in timeArr"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineDeal" />
    </el-row>


    <el-row style="background:#fff;padding:10px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="auctionNum" />
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="auctionAmount" />
    </el-row>

<!--    <pie-chart />-->

<!--    <el-row :gutter="32">-->
<!--      <el-col :xs="24" :sm="24" :lg="8">-->
<!--        <div class="chart-wrapper">-->
<!--          <raddar-chart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="24" :sm="24" :lg="8">-->
<!--        <div class="chart-wrapper">-->
<!--          <pie-chart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="24" :sm="24" :lg="8">-->
<!--        <div class="chart-wrapper">-->
<!--          <bar-chart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->


  </div>
</template>

<script>
  import PanelGroup from './dashboard/PanelGroup'
  import LineChart from './dashboard/LineChart'
  // import RaddarChart from './dashboard/RaddarChart'
  import PieChart from './dashboard/PieChart'
  import {getAuctionMoney, getAuctionNum, getInvitePeople, getProbability} from "@/api/yipaiju/datav";
  import {listAll} from "@/api/yipaiju/system_city";
  // import BarChart from './dashboard/BarChart'
  const chartData = {
    lineInvite: {
      title: '每日人数',
      legendData: ['无手机号', '有手机号'],
      seriesData: [
        // {
        //   name: '无手机号',
        //   type: 'line',
        //   data: [['2023-01', 120], ['2023-02', 82], ['2023-03', 18], ['2023-04', 154], ['2023-05', 82], ['2023-06', 82], ['2023-07', 82]]
        // },
        // {
        //   name: '有手机号',
        //   type: 'line',
        //   data: [['2023-01', 12], ['2023-02', 182], ['2023-03', 108], ['2023-04', 54], ['2023-05', 8], ['2023-06', 12], ['2023-07', 32]]
        // }
      ]
    },

    lineDeal: {
      title: '成交折扣/概率%',
      legendData: ['折扣', '概率'],
      seriesData: [
        // {
        //   name: '无手机号',
        //   type: 'line',
        //   data: [['2023-01', 120], ['2023-02', 82], ['2023-03', 18], ['2023-04', 154], ['2023-05', 82], ['2023-06', 82], ['2023-07', 82]]
        // },
        // {
        //   name: '有手机号',
        //   type: 'line',
        //   itemStyle: {
        //     color: '#4f1313'
        //   },
        //   data: [['2023-01', 12], ['2023-02', 182], ['2023-03', 108], ['2023-04', 54], ['2023-05', 8], ['2023-06', 12], ['2023-07', 32]]
        // }
      ]
    },

    auctionNum: {
      title: '法拍数量（件）',
      legendData: ['挂拍', '成交'],
      seriesData: [
        // {
        //   name: '挂拍',
        //   type: 'bar',
        //   barWidth: 20,
        //   itemStyle: {
        //     color: '#c08a4d'
        //   },
        //   data: [['2023-01', 120], ['2023-02', 82], ['2023-03', 18], ['2023-04', 154], ['2023-05', 82], ['2023-06', 82], ['2023-07', 82]]
        // },
        // {
        //   name: '成交',
        //   type: 'bar',
        //   barWidth: 20,
        //   itemStyle: {
        //     color: '#164d30'
        //   },
        //   data: [['2023-01', 12], ['2023-02', 182], ['2023-03', 108], ['2023-04', 54], ['2023-05', 8], ['2023-06', 12], ['2023-07', 32]]
        // }
      ]
    },
    auctionAmount: {
      title: '法拍金额（亿）',
      legendData: ['挂拍', '成交'],
      seriesData: [
        // {
        //   name: '挂拍',
        //   type: 'bar',
        //   barWidth: 20,
        //   itemStyle: {
        //     color: '#c08a4d'
        //   },
        //   data: [['2023-01', 120], ['2023-02', 82], ['2023-03', 18], ['2023-04', 154], ['2023-05', 82], ['2023-06', 82], ['2023-07', 82]]
        // },
        // {
        //   name: '成交',
        //   type: 'bar',
        //   barWidth: 20,
        //   itemStyle: {
        //     color: '#164d30'
        //   },
        //   data: [['2023-01', 12], ['2023-02', 182], ['2023-03', 108], ['2023-04', 54], ['2023-05', 8], ['2023-06', 12], ['2023-07', 32]]
        // }
      ]
    },

    messages: {
      expectedData: [200, 192, 120, 144, 160, 130, 140],
      actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
      expectedData: [80, 100, 121, 104, 105, 90, 100],
      actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130]
    }
  }

  export default {
    name: 'Index',
    components: {
      PanelGroup,
      LineChart,
      // RaddarChart,
      PieChart,
      // BarChart
    },
    data() {
      return {
        lineInvite: chartData.lineInvite,
        lineDeal: chartData.lineDeal,
        auctionNum: chartData.auctionNum,
        auctionAmount: chartData.auctionAmount,

        provinceArr: [{id: 1, name: '上海'}, {id: 2, name: '北京'}],
        cityArr: [{id: 1, name: '哈尔滨'}, {id: 2, name: '大连'}],
        districtArr: [{id: 1, name: '香坊'}, {id: 2, name: '南岗'}],
        timeArr: [{id: 6, name: '半年'}, {id: 12, name: '一年'}],

        provinceId: null,
        cityId: null,
        districtId: null,

        province: null,
        city: null,
        district: null,
        time: null,
      }
    },
    created() {
      // this.lineInvite.seriesData[0].data = [['2023-01', 66]]
      this.handleInvitePeople();
      this.handleProbability();
      this.handleAuctionNum();
      this.handleAuctionMoney();

      // 获取省份
      listAll({parentId: 0}).then(response => {
        this.provinceArr = response.rows
      });
    },
    methods: {
      // handleSetLineChartData(type) {
      //   this.lineChartData = lineChartData[type]
      // }
      handleInvitePeople(){
        // console.log("this.getDays()",this.getDays().startTime)
        getInvitePeople({}).then(response => {
          this.$set(this.lineInvite, 'seriesData', response.data)
        });
      },
      handleProbability(){
        let params = {
          diffTime: this.time,
          province: this.province,
          city: this.city,
          district: this.district
        }
        getProbability(params).then(response => {
          this.$set(this.lineDeal, 'seriesData', response.data)
        });
      },
      handleAuctionNum(){
        let params = {
          diffTime: this.time,
          province: this.province,
          city: this.city,
          district: this.district
        }
        getAuctionNum(params).then(response => {
          this.$set(this.auctionNum, 'seriesData', response.data)
        });
      },
      handleAuctionMoney(){
        let params = {
          diffTime: this.time,
          province: this.province,
          city: this.city,
          district: this.district
        }
        getAuctionMoney(params).then(response => {
          this.$set(this.auctionAmount, 'seriesData', response.data)
        });
      },
      provinceChangeEvent(e){
        this.districtArr = [];
        this.cityId = null;
        this.districtId = null;
        this.city = null;
        this.district = null;
        if (this.provinceId){
          this.province = this.provinceArr.filter((item) => {
            return item.cityId == this.provinceId;
          })[0].name;

          listAll({parentId: this.provinceId}).then(response => {
            this.cityArr = response.rows
          });
        }else {
          this.province = null;
        }

        this.handleProbability();
        this.handleAuctionNum();
        this.handleAuctionMoney();
      },
      cityChangeEvent(e){
        this.districtId = null;
        this.district = null;
        if(this.cityId){
          this.city = this.cityArr.filter((item) => {
            return item.cityId == this.cityId;
          })[0].name;
          listAll({parentId: this.cityId}).then(response => {
            this.districtArr = response.rows
          });
        }else {
          this.city = null;
        }

        this.handleProbability();
        this.handleAuctionNum();
        this.handleAuctionMoney();
      },
      districtChangeEvent(e){
        if(this.districtId){
          this.district = this.districtArr.filter((item) => {
            return item.cityId == this.districtId;
          })[0].name;
        }else {
          this.district = null;
        }

        //刷新曲线
        this.handleProbability();
        this.handleAuctionNum();
        this.handleAuctionMoney();
      },
      timeChangeEvent(){
        //刷新曲线
        this.handleProbability();
        this.handleAuctionNum();
        this.handleAuctionMoney();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
